<template>
  <div class="" v-if="activity != null">
    <div class="title">{{ activity.activityName }}</div>
    <div class="wrap">
      <div class="time">
        活动举办时间:
        <span>{{ activity.holdTime }}</span>
      </div>
      <div class="site">
        活动举办地点:
        <span class="info">{{ activity.site }}</span>
      </div>
    </div>

    <div v-html="activity.introduce" class="introduce"></div>

    <div v-for="file in fileList" :key="file.id">
      <img
        :src="'/fileServer' + file.filePath"
        class="show-image"
        :alt="file.fileName"
        v-if="isImage(file.fileName)"
      />
      <a :href="'/fileServer' + file.filePath" v-else>{{ file.fileName }}</a>
    </div>

    <Share />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";
import Share from "@/components/common/Share.vue";

const OK = 200;
const route = useRoute();
const activity = ref({});
const fileList = ref([]);

const get = async () => {
  const id = route.params.id;
  try {
    const res = await axios.get("/api/activities/" + id);
    console.log(res.data);
    if (res.data.code === OK) {
      activity.value = res.data.data;
      fileList.value = activity.value.fileList;
    } else {
      ElMessage.error(res.data.data);
    }
  } catch (error) {
    console.error("获取活动信息失败:", error);
  }
};

const isImage = (fileName) => {
  const ext = fileName.substring(fileName.lastIndexOf(".") + 1);
  return ext === "png" || ext === "jpg";
};

onMounted(() => {
  get();
});

watch(
  () => route.params.id,
  () => {
    get();
  }
);
</script>

<style scoped>
.title {
  display: block;
  font-size: 24px;
  color: #9a0e14;
  margin-top: 10px;
}
.wrap {
  float: right;
}
.time {
  margin-right: 100px;
  line-height: 20px;
}
.site {
  margin-right: 100px;
}
.site span {
  padding-left: 20px;
  font-size: 18px;
}
.introduce {
  line-height: 150%;
  padding: 80px 20px 0;
  text-indent: 5px;
  text-align: left;
}
.show-image {
  width: 420px;
  height: 360px;
}
</style>
